import React, { useCallback, useState } from 'react';

import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';
import { Modal } from 'antd';

import Container from './Container';

function BasicLayout(props) {
  const [modalConfig, setModalConfig] = useState({
    content: '',
    visible: false,
  });

  const onReview = useCallback((content) => {
    setModalConfig((state) => {
      state.content = content;
      state.visible = true;

      return { ...state };
    });
  }, []);

  const newProps = {
    ...props,
    onReview,
  };

  return (
    <div className="w100p h100p oveflow-hidden">
      <DndProvider backend={HTML5Backend}>
        <Container {...newProps} />
      </DndProvider>

      <Modal
        {...modalConfig}
        width={600}
        centered={true}
        onCancel={() => setModalConfig({ visible: false, content: '' })}
      >
        <div dangerouslySetInnerHTML={{ __html: modalConfig.content }}></div>
      </Modal>
    </div>
  );
}

export default BasicLayout;
